<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* vue-iclient (https://github.com/SuperMap/vue-iclient)
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_attributes_Vue"></title>
        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
        <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
        <style>
            #main {
                margin: 0 auto;
                width: 100%;
                height: 100%;
            }
            .sm-component-table-fixed {
               width: 100% !important;
            }
        </style>
    </head>

    <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
        <div id="main">
            <sm-web-map style="height: 500px" server-url="https://www.supermapol.com/" map-id="505367620"></sm-web-map>
            <div style="position: relative; height: 500px; width: 100%">
                <sm-attributes :table="table" layer-name="全国671个气象站观测数据" :field-configs="fieldConfigs"></sm-attributes>
            </div>
        </div>

        <script>
            new Vue({
                el: '#main',
                data() {
                    return {
                        fieldConfigs: [
                            { value: '平均最低气温_Num', visible: false },
                            { value: 'SmID', visible: false },
                            {
                                value: '站台',
                                visible: true,
                                filters: [
                                    { text: '塔城', value: '塔城' },
                                    { text: '大同', value: '大同' },
                                    { text: '石家庄', value: '石家庄' }
                                ],
                                onFilter: (value, record) => record['站台'].indexOf(value) === 0
                            },
                            {
                                value: '省份',
                                visible: true,
                                onFilter: (value, record) => record['省份'].indexOf(value) === 0,
                                scopedSlots: {
                                    filterDropdown: 'filterDropdown',
                                    filterIcon: 'filterIcon',
                                    customRender: 'customRender'
                                }
                            },
                            { value: '海拔', visible: false },
                            { value: '最高气温_Num', visible: false },
                            { value: '最高气温', visible: false },
                            { value: '最高七天气温_Num', visible: false },
                            { value: '最热七天气温', visible: true, defaultSortOrder: 'descend' },
                            { value: '最低气温_Num', visible: false },
                            { value: '最低气温', visible: false },
                            { value: '年均降雨_Num', visible: false },
                            { value: 'lon', visible: true, title: '经度', width: 250 },
                            { value: 'lat', visible: true, title: '纬度', width: 250 }
                        ],
                        table: {
                          pagination: {
                            pageSize: 6
                          }
                        }
                    };
                }
            });
        </script>
    </body>
</html>